import React, {PureComponent} from 'react';
import {Picker, Button, List, Card, WingBlank, WhiteSpace, Icon} from 'antd-mobile';
import styles from './index.module.less'

const home_thumb = {
    width: '38px',
    marginRight: '15px'
};

export default class Home extends PureComponent {

    constructor(props) {
        super(props);
    }

    /**
     * 获得学生
     * @returns {*}
     */
    getStudents = () => {
        const {profile: {studentList}} = this.props;
        return studentList && studentList.map(student => {
            return {value: student.id, label: student.name}
        })
    }

    /**
     * 切换学生
     * @param value
     */
    onChangeStudent = (value) => {
        const {profile: {studentList}, setGlobalState} = this.props;
        const student = studentList && studentList.find(student => student.id === value[0]);
        if (student) {
            setGlobalState({currentStudent: student})
        }
    }

    /**
     * 跳转到课程表
     */
    goToLesson = () => {
        const {setGlobalState, currentStudent, history} = this.props;
        setGlobalState({
            currentStudent
        })
        //跳转到课程表页面
        // history.push({pathname:'/lesson', query:{studentId: currentStudent.id}})
        history.push(`/lesson?studentId=${currentStudent.id}`)
    }

    /**
     * 跳转到课程反馈
     */
    goToFeedback = () => {
        const {setGlobalState, currentStudent, history} = this.props;
        setGlobalState({
            currentStudent
        })
        //跳转到课程表页面
        // history.push({pathname:'/lesson', query:{studentId: currentStudent.id}})
        history.push(`/feedback?studentId=${currentStudent.id}`)
    }

    /**
     * 获得选中的学生
     */
    getPickValue = () => {
        const pickValue = [];
        const { currentStudent } = this.props;
        currentStudent.id && pickValue.push({value: currentStudent.id, label: currentStudent.name})
        return pickValue;
    }

    render() {
        // const data = [{value:'Nihao', label:'你好'}, {value:'Nihao2', label:'你好2'}]
        const {currentStudent} = this.props;
        return (
            <>
                <div className={styles.profile}>
                    <div className={styles.profile_child}>
                        <Picker
                            value={this.getPickValue()}
                            title="选择学生"
                            cols={1}
                            data={this.getStudents()}
                            onChange={this.onChangeStudent}
                            extra={currentStudent.id ? currentStudent.name : '请选择(可选)'}
                        >
                            <List.Item arrow="horizontal"><img
                                src="https://img3.doubanio.com/icon/u2464526-81.jpg"/></List.Item>
                        </Picker>
                    </div>
                    <div className={styles.profile_child}>

                    </div>
                </div>
                <div>
                    <WingBlank>
                        <WhiteSpace/>
                        <Card>
                            <Card.Header
                                title="查看课表"
                                thumb={require('../../assets/images/ic_course03@3x.png')}
                                thumbStyle={home_thumb}
                                extra={<Icon onClick={this.goToLesson} color="blue" type="right"/>}
                            />
                        </Card>
                        <WhiteSpace/>
                        <Card>
                            <Card.Header
                                title="查看反馈"
                                thumb={require('../../assets/images/ic_coursecopy@3x.png')}
                                thumbStyle={home_thumb}
                                extra={<Icon onClick={this.goToFeedback} color="blue" type="right"/>}
                            />
                        </Card>
                    </WingBlank>

                </div>
            </>
        );
    }
}
